<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ElIcon, ElMessage } from 'element-plus'
import { View, Hide } from '@element-plus/icons-vue'

const props = defineProps({
  size: {
    type: Number,
    default: 16
  },
  password: String
})

const passwordVisible = ref(false)

function handleClick() {
  passwordVisible.value = !passwordVisible.value
}
</script>

<template>
  <div>
    <div class="flex items-center gap-1" v-if="passwordVisible">
      <span>
        {{ props.password }}
      </span>
      <el-icon class="cursor-pointer" :size="props.size" @click="handleClick">
        <View />
      </el-icon>
    </div>
    <div class="flex items-center gap-1" v-else>
      <span> ****** </span>
      <el-icon class="cursor-pointer" :size="props.size" @click="handleClick">
        <Hide />
      </el-icon>
    </div>
  </div>
</template>
